import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import currentEnv from '../../../configure/currentEnv';
import {Image, View, Text, Swiper, SwiperItem} from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'

export default function GoodsDetail() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()
  const [curSwiper,setCurSwiper] = useState('')
  const [couponList,setCouponList] = useState(['满199减9元'])

  const filterRichTextContent = (content = '') => {
    return content.toString().replace(/\<img\s+/gi, `<img mode="widthFix" `);
  };

  return (
    <View className='goods-detail'>
      <View className="detail-nav-bar at-icon at-icon-chevron-left" style={{top:capsule.top+'PX'}} onClick={()=>{
        Taro.navigateBack().catch(()=>{
          Taro.reLaunch({
            url:currentEnv.project=='yingjing'?'/pages/index/index':'/pages/movie/index'
          })
        })
      }}></View>
      <View className="detail-swiper">
        <Swiper className="goods-images" circular indicatorDots={false} autoplay onChange={e=>{
          setCurSwiper(e.detail.current)
        }}>
          {[1,1,1].map((item, idx) => (
            <SwiperItem key={idx}>
              <Image mode="widthFix" className="inner" src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' />
            </SwiperItem>
          ))}
        </Swiper>
        <View className="swiper-dots">
          {curSwiper+1}/{'5'}
        </View>
      </View>
      
      <View className="detail-summary">
        <View className='priceLine'>
          <View className="price">
            <Text className="zUnit">¥</Text>
            <Text className="zNum">199.90</Text>
            <Text className="price-del">¥299.00</Text>
          </View>
        </View>
        {couponList?.length?<View className="summary-tags">
          {couponList.map(res=>{
            return <Text className='tags-span'>{res}</Text>
          })}
        </View>:null}
        <View className="summary-ticket">
          <View className="ticket-info">
            <Image className='info-icon' src={require('@/images/home/ticket-icon.svg')} mode='widthFix' style={{width:23}}></Image>
            <View className="info-title">新人专享礼包，即享首单优惠</View>
          </View>
          <View className="ticket-button">立即领取</View>
        </View>
        <View className="name">杯具熊定制保温水杯 大容量 男士女士学生便捷 平装电影设定资料 中文原版设定</View>
        <View className="desc">好评如潮 美观大方好用 原版自动化</View>
        <View className="summary-ling">
          领券 <Text className='at-icon at-icon-chevron-right'></Text>
        </View>
      </View>
      
      <View className="detail-purchase">
        <View className="purchase-list">
          <View className="label">选择</View>
          <Text className="list-txt">已选：银色 / 256G固态硬盘 / 全网通版...</Text>
          <View className="at-icon at-icon-chevron-right"></View>
        </View>
      </View>

      <View className="detail-evaluate">
        <View className="evaluate-title">评价(1000+)
          <View className="title-span">查看更多 <Text className='at-icon at-icon-chevron-right'></Text></View>
        </View>
        <View className="evaluate-list">
          <View className="list-item">
            <View className="item-header">
              <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='header-img' mode='aspectFill'></Image>
              <View className="header-title">
                <View className="h2">房贝贝</View>
                2024-04-01
              </View>
            </View>
            <View className="item-info">
              <View style={{margin:'8px 0'}}>杯具熊定制保温水杯大容量，男士女士学生便捷平装电影设定资料，中文原版设定集。杯具熊定制保温水杯大容量。</View>
              <View className="info-imgs">
                <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='imgs-img' mode='aspectFill'></Image>
                <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='imgs-img' mode='aspectFill'></Image>
              </View>
            </View>
          </View>
        </View>
      </View>
      
      <View className="goods-html">
        <View className="detail-title">宝贝详情</View>
        <View
          className="detail"
          dangerouslySetInnerHTML={{
            __html: filterRichTextContent('productDetail.bodyHtml'),
          }}
        ></View>
      </View>

      
      <View className="priceAppend">
        <View className="lableLine">价格说明</View>
        <View className="txtLine">
          <Text className='txt-left customePageBackgroundStyle'></Text>
          <View className="txt-info">
            <View className="info-h2">划线价格</View>
            <View className="info-p">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，<Text style={{fontWeight:600}}>并非原价</Text>，仅供参考。</View>
          </View>
        </View>
        <View className="txtLine">
          <Text className='txt-left customePageBackgroundStyle'></Text>
          <View className="txt-info">
            <View className="info-h2">划线价格</View>
            <View className="info-p">商品的<Text style={{fontWeight:600}}>实时标价</Text>，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</View>
          </View>
        </View>
        <View className="txtLine">
          <Text className='txt-left customePageBackgroundStyle'></Text>
          <View className="txt-info">
            <View className="info-p">商品详情页（含主图）以图片或文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，具体请以结算页面的标价、优惠条件或活动规则为准。</View>
          </View>
        </View>
      </View>

      <View className="detail-goods">
        <View className="goods-title customePageStyle">
          <Image src={require('@/images/common/detail-title.svg')} mode='widthFix' style={{width:'22px'}} />
          <View style={{margin:'0 8px'}}>看了又看</View>
          <Image src={require('@/images/common/detail-title.svg')} mode='widthFix' style={{width:'22px',transform:'rotate(180deg)'}} />
        </View>
        <View className="goods-list">
          <View className="list-item">
            <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='item-img' mode='aspectFill' />
            <View style={{padding: '8px'}}>
              <View className="item-h2 omit-2">杯具熊定制保温水杯 大容量 男士女士学生便捷</View>
              <View className="item-price customePageStyle"><Text style={{fontSize:'12px'}}>¥</Text>45.9</View>
            </View>
          </View>
        </View>
      </View>

      <View className="detail-footer">
        <View className="footer-box">
          <View className="box-item">
            <Image src={require('@/images/service.svg')} mode='widthFix' style={{width:24}}></Image>
            客服
          </View>
          <View className="box-item">
            <Image src={require('@/images/shop-cart.svg')} mode='widthFix' style={{width:24}}></Image>
            购物车
          </View>
          <View className="footer-button">
            <View className='left button'>加购物车</View>
            <View className='right button'>立即购买 <Text style={{display:'block',fontSize:12,flexBasis:'100%'}}>¥199.00</Text></View>
          </View>
        </View>
      </View>

    </View>
  )
}
